<template>
  <div class="menu">
    <div class="menu-body">
      <van-nav-bar fixed title="菜单" />
      <!-- animated sticky line-width="0" -->
      <van-tabs>
        <van-tab v-for="value in datatype" :key="value.id">
          <template #title>
            <div @click="cli(value)">
              <img
                class="auto-img"
                :src="value.isActive ? value.activeIcon : value.icon"
                alt
              />
              <div class="typeDesc" :class="{ active: value.isActive }">
                {{ value.typeDesc }}
              </div>
            </div>
          </template>
          <div class="product">
            <div
              class="products"
              v-for="(value, index) in products"
              :key="index"
              @click="toggles(value)"
            >
              <div class="pro-box">
                <div class="pro-img">
                  <img class="auto-img" :src="value.smallImg" alt />
                </div>
                <div class="pro-info">
                  <div class="pro-text fl">
                    <div class="ch-name">{{ value.name }}</div>
                    <p class="desc">{{ value.desc }}</p>
                    <div class="pro-price">
                      ￥{{ value.price }}
                      <div class="plus fr">
                        <div>+</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import '../../assets/less/menu.less'
import { typeAPI, typeProductsAPI } from '@/api/user'
export default {
  name: 'Caidan',
  data () {
    return {
      value: '',
      datatype: [],
      products: []
    }
  },
  created () {
    this.getbannerData()
  },
  methods: {
    // 获取咖啡类型
    async getbannerData () {
      const res = await typeAPI({ appkey: this.$store.state.appkey })
      console.log(res)
      if (res.code === 400) {
        const iconData = [
          {
            type: 'latte',
            icon: require('../../assets/images/icon (1).gif'),
            activeIcon: require('../../assets/images/icon (7).gif')
          },
          {
            type: 'coffee',
            icon: require('../../assets/images/icon (8).gif'),
            activeIcon: require('../../assets/images/icon (4).gif')
          },
          {
            type: 'rena_ice',
            icon: require('../../assets/images/icon (9).gif'),
            activeIcon: require('../../assets/images/icon (6).gif')
          },
          {
            type: 'fruit_tea',
            icon: require('../../assets/images/icon (1).png'),
            activeIcon: require('../../assets/images/icon (2).png')
          }
        ]
        res.result.forEach(v => {
          //  将图片赋值给相关类型
          for (let i = 0; i < iconData.length; i++) {
            if (v.type === iconData[i].type) {
              v.icon = iconData[i].icon
              v.activeIcon = iconData[i].activeIcon
              v.isActive = false
              break
            }
          }
        })
        res.result.unshift({
          // 添加推荐类型
          type: 'isHot',
          typeDesc: '推荐',
          icon: require('../../assets/images/hot (2).png'),
          activeIcon: require('../../assets/images/hot (1).png'),
          isActive: true
        })
        this.datatype = res.result
        this.gettypeProducts(this.datatype[0])
      }
    },
    // 切换类型
    cli (value) {
      console.log(value)
      if (value.isActive) {
        // 如果是点击同一个类型则返回
        return
      }
      for (let i = 0; i < this.datatype.length; i++) {
        // 高亮通过排他方法实现
        if (this.datatype[i].isActive) {
          this.datatype[i].isActive = false
        }
      }
      value.isActive = true
      this.gettypeProducts(value) // 调用获取类型数据方法并将类型传参
    },
    // 根据类型获取相关数据
    async gettypeProducts (value) {
      // // 先清空数据
      this.products = []
      // 获取本地存储 如果有则返回
      const data = sessionStorage.getItem(value.type)
      if (data) {
        this.products = JSON.parse(data)
        return
      }
      const params = {
        key: 'type',
        value: value.type,
        appkey: this.$store.state.appkey
      }
      if (value.type === 'isHot') {
        params.key = 'isHot'
        params.value = 1
      }
      const res = await typeProductsAPI(params)
      console.log(res)
      if (res.code === 500) {
        this.products = res.result
        //  将数据储存到本地 下次将不重新加载数据
        sessionStorage.setItem(value.type, JSON.stringify(this.products))
      }
    },
    toggles (value) {
      this.$router.push({ name: 'Detail', query: { pid: value.pid } })
    }
  }
}
</script>

<style lang="scss" scoped></style>
